<template>
  <div class="Minea">
    <header>光与影</header>
    <!--pages/mine/mine.wxml-->
    <div class="headera">
      <img src="../assets/logo.png" class="soulogo">
      <input placeholder='血战钢锯岭、你的名字' class="sou">
    </div>
    <div>
      <div v-for="(item,index) in list" :key="index">
        <div class="nei_top">
          <span class="text1">正在热映</span>
          <span class="text2">更多 ></span>
        </div>
        <div class="zong">
          <ul class="ul">
            <li class="li" v-for="(itema,indexa) in item" :key="indexa">
              <img class="dianying" :src="itema.images.large">
              <div class="dianyingx">{{itema.original_title}}</div>
              <div class="pingjia">
                <img src="../assets/logo.png" class='xing'>
                <img src="../assets/logo.png" class='xing'>
                <span class='ping'>{{itema.rating.average}}</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//import axios from "axios";
// import { theaters } from '../js/api.js'
 import { getData,jjsx,top250 } from '../js/api.js'
export default {
  name: 'Minea',
  data () {
    return {
      list:[]
    }
  },
  created(){
    this.shuju()
  },
  methods:{
    shuju(){
      getData().then(res=>{
      //console.log(res)
      if(res.status==200){
        console.log("热映",res.data.subjects);
        this.list=res.data.subjects;
      }
      })
      .catch(function(err){
        console.log(err);
      })
      jjsx().then(res=>{
      //console.log(res)
      if(res.status==200){
        console.log("即将上线",res.data.subjects);
        this.list=res.data.subjects;
      }
      })
      .catch(function(err){
        console.log(err);
      })
      top250().then(res=>{
      //console.log(res)
      if(res.status==200){
        console.log("top",res.data.subjects);
        this.list=res.data.subjects;
      }
      })
      .catch(function(err){
        console.log(err);
      })
    }
  }
  // created(){
  //   theaters().then(res=>{
  //     console.log(res)
  //   })
  // }
  // created(){
  //   this.getData()
  // },
  // getData(){
  //   axios.get('/api/v2/movie/in_theaters',function(res){
  //     console.log(11111111)
  //   })
  // }
  // created(){
  //   this.getData()
  // },
  // methods:{
  //   // getData(){
  //   //   var that =this
  //   //   axios({
  //   //     methods:'get',
  //   //     url: "/api/v2/movie/in_theaters"
  //   //   })
  //   //   .then(function(res){
  //   //     //console.log(res)
  //   //     if(res.status==200){
  //   //       console.log("热映",res.data.subjects);
  //   //       that.list=res.data.subjects;

  //   //     }
  //   //   })
  //   //   .catch(function(err){
  //   //     console.log(err);
  //   //   })
  //   // }
  // }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.Minea{
  width: 100%;
}
header{
  color:#fff;
  background: #405f80;
  height:0.45rem;
  text-align: center;
  line-height: 0.45rem;
  font-size: 0.17rem;
}
.headera{
  position: relative;
}
.sou{
  height:0.4rem;
  width: 100%;
  background-color: #f2f2f2;
  font-size: 0.135rem;
  padding-left: 0.535rem;
  border:none;
  box-sizing: border-box;
}
.soulogo{
  height:0.13rem;
  width: 0.13rem;
  position: absolute;
  top: 0.135rem;
  left: 0.1rem;
}
.nei_top{
  display: flex;
  justify-content:space-between;
  width:3.44rem;
  margin:0 auto;
  margin-top: 0.25rem;
  margin-bottom: 0.145rem;
}
.text1{
  color:#666;
  font-size: 0.125rem;
}
.text2{
  color:#1f4ba5;
  font-size: 0.125rem;
}
.zong{
  width: 100%;
  margin: 0 auto;
  white-space: nowrap
}
.ul{
  display: flex;
  flex-direction: row;
   width: 100%;
  margin: 0 auto;
  overflow: scroll
}
.li{
  display: inline-block;
  flex-direction:column;
  margin-left: 0.22rem;
}
.dianying{
  height:1.35rem;
  width:1rem;
}
.dianyingx{
  font-size: 0.105rem;
  width:1rem;
  color:#666;
  margin: 0.13rem 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pingjia{
  display: flex;
}
.xing{
  height:0.08rem;
  width:0.08rem;
  margin-top: 0.04rem;
}
.ping{
  font-size: 0.1rem;
  color:#1f3463;
  margin-left: 0.125rem;
}
</style>
